<template>  
  <el-table :data="formattedFlights" stripe>  
    <el-table-column label="航班号" prop="flightNumber" width="120"></el-table-column>  
    <el-table-column label="第一班起始时间" prop="firstFlightStartTime" width="180"></el-table-column>  
    <el-table-column label="最后一班结束时间" prop="lastFlightEndTime" width="180"></el-table-column>  
  </el-table>  
  <div v-for="(item, index) in s" :key="index">  
      <label>  
        <el-checkbox :value="index" v-model="ss">{{ item }}</el-checkbox>
      </label>  
    </div>  
    <button @click="f()">按钮</button>
</template>  

<script setup lang="ts" name="tickets">  
import { reactive, computed,ref } from 'vue';  
let s=ref<string[]>([]);
let ss=ref<number[]>([]);
s.value.push('a');
s.value.push('b');
s.value.push('c');
function f(){
  console.log(s.value);
  console.log(ss.value)
}
// 假设多个航班数据，每个中转有多条航班记录  
const flights = reactive([  
  // 每个元素代表一个中转航班  
  {  
    flightNumber: '中转1',  
    legs: [  
      { flight: 'CA123', startTime: '2024-11-25 08:00', endTime: '2024-11-25 10:00' },  
      { flight: 'CA456', startTime: '2024-11-25 12:00', endTime: '2024-11-25 14:00' },  
    ],  
  },  
  {  
    flightNumber: '中转2',  
    legs: [  
      { flight: 'CA789', startTime: '2024-11-25 16:00', endTime: '2024-11-25 18:00' },  
      { flight: 'CA101', startTime: '2024-11-25 19:00', endTime: '2024-11-25 20:30' },  
    ],  
  },  
]);  

// 计算属性获取每个航班的第一班和最后一班时间  
const formattedFlights = computed(() => {  
  return flights.map(flight => {  
    const firstFlightStartTime = flight.legs[0]?.startTime || '无'; // 第一班飞机的起始时间  
    const lastFlightEndTime = flight.legs[flight.legs.length - 1]?.endTime || '无'; // 最后一班飞机的结束时间  

    return {  
      flightNumber: flight.flightNumber,  
      firstFlightStartTime,  
      lastFlightEndTime,  
    };  
  });  
});  
</script>  

<style scoped>  
/* 您可以在此处添加自定义样式 */  
</style>